﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100" id="VerticalScrolling">
    <h2><DemoNavLink Link="GridPagingAndScrolling#VerticalScrolling" />Data Grid - Vertical Scrolling</h2>
    <p>
        This demo module illustrates how to enable vertical scrolling in the DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> for Blazor.
    </p>
    <p>
        The grid height is determined by the number of rows displayed within a page. To reduce the grid's height, display the vertical scrollbar using the
        <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.VerticalScrollBarMode">DxDataGrid.VerticalScrollBarMode</a> property, and specify the height of the scrollable area (in pixels) using the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.VerticalScrollableHeight">DxDataGrid.VerticalScrollableHeight</a> property.
    </p>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.VerticalScrollBarMode">DxDataGrid.VerticalScrollBarMode</a> property accepts the following values:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Auto</a> - The scrollbar is automatically shown when the size of the component content exceeds the size of the component itself.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Hidden</a> - The scrollbar is hidden.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Visible</a> - The scrollbar is visible.</li>
    </ul>
</div>

@if (DataSource == null) {
    <p><em>Loading...</em></p>
} else {
    <DxDataGrid Data="@DataSource"
                VerticalScrollBarMode="ScrollBarMode.Auto"
                VerticalScrollableHeight="300"
                PageSize="30"
                CssClass="mw-1100">

        <DxDataGridColumn Field="@nameof(ProductFlat.Id)" Caption="ID" Width="50px">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.Availability)" Caption="Availability" Width="110px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as ProductFlat).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.Category)" Caption="Category"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" Caption="Subcategory"></DxDataGridColumn>
        <DxDataGridDateEditColumn Field="@nameof(ProductFlat.LastUpdated)" Caption="Last Updated"></DxDataGridDateEditColumn>

    </DxDataGrid>

    <CodeSnippet_Grid_Scrolling_Vertical></CodeSnippet_Grid_Scrolling_Vertical>
}

@code {
    IEnumerable<ProductFlat> DataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
    }
}
